<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/system/include/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>流程部署</title>
<link rel="stylesheet" type="text/css" href="${jsAndCss}/css/style.css" />
<link rel="stylesheet" type="text/css"
	href="${jsAndCss}/css/WdatePicker.css" />
<link rel="stylesheet" type="text/css"
	href="${jsAndCss}/css/skin_/table.css" />
<link rel="stylesheet" type="text/css"
	href="${jsAndCss}/css/jquery.grid.css" />
</head>
<body>
	<div id="container" style="position:relative;">
		<div id="hd"></div>
		<div id="bd">
			<div id="main">
				<div class="search-box ue-clear">
					<div class="search-area">
						<div class="kv-item ue-clear">
							<label>选择时间：</label>
							<div class="kv-item-content ue-clear">
								<span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" /> <span class="radio"></span>
								</span> <span class="text">全部</span>
								</span> <span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" /> <span class="radio"></span>
								</span> <span class="text">近3天</span>
								</span> <span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" /> <span class="radio"></span>
								</span> <span class="text">近一周</span>
								</span> <span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" /> <span class="radio"></span>
								</span> <span class="text">近一月</span>
								</span> <span class="choose"> <span class="checkboxouter">
										<input type="radio" name="time" data-define="define" /> <span
										class="radio"></span>
								</span> <span class="text">自定义</span>
								</span> <span class="define-input"> <input type="text"
									placeholder="开始时间" /> <span class="division"></span> <input
									type="text" placeholder="结束时间" />
								</span>
							</div>
						</div>
						<div class="kv-item ue-clear">
							<label>选择类型:</label>
							<div class="kv-item-content">
								<select>
									<option>全部</option>
									<option>全部</option>
									<option>全部</option>
								</select>
							</div>
						</div>
					</div>
					<div class="search-button">
						<input class="button" type="button" value="搜索一下" />
						<a href="${ctx}/apply/handleIndex"><input class="button" type="button" value="返回上一页" /></a>
					</div>
				</div>

				<div class="table">
					<div class="opt ue-clear">
						<span class="sortarea"> <span class="sort"> <label>排序：</label>
								<span class="name"> <i class="icon"></i> <span
									class="text">名称</span>
							</span>
						</span> <i class="list"></i> <i class="card"></i>
						</span> <span class="optarea"> <a href="${ctx }/editRole?editFlag=1" class="add">
								<i class="icon"></i> <span class="text">添加</span>
						</a> <a href="javascript:;" class="delete"> <i class="icon"></i> <span
								class="text">删除</span>
						</a> <a href="javascript:;" class="statistics"> <i class="icon"></i>
								<span class="text">统计</span>
						</a> <a href="javascript:;" class="config"> <i class="icon"></i> <span
								class="text">配置</span>
						</a>
						</span>
					</div>
					<div class="grid"></div>
					<div id="paging" class="pagination"></div>
					<div id="windowBox" style="position:absolute;top:0px;left:200px;width:700px;display:none;
						                           background-color:white;z-index:99;box-shadow:0px 0px 5px #999">
						<div id="close" style="position:absolute;top:10px;right:15px;font-size:18px;z-index:100;cursor:pointer">X</div>
						<div id="window" >                         
						</div>
					</div>	
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="${jsAndCss}/js/jquery.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/global.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/jquery.select.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/core.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/jquery.pagination.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/jquery.grid.js"></script>
<script type="text/javascript" src="${jsAndCss}/js/WdatePicker.js"></script>
<script type="text/javascript">
$("#close").click(function(){
	$("#windowBox").hide();
});
var roleMgr={
		addRole:function(){
			$.ajax({
				type:'post',
				url:'${ctx}/addRole',
				success:function(data){
					$("#window").html(data);
					$("#windowBox").show();
				}
			});
		},
		deleteRole:function(roleId){
			$.ajax({
				type:'post',
				url:'${ctx}/deleteRole',
				dataType:'json',
				data:{"roleId":roleId},
				success:function(data){
					alert("删除成功！");
					window.location.reload();
				},
				error:function(data){
					alert("删除未成功！");
					window.location.reload();
				}
			});
		}
}



var listMgr={
		getList : function(pageNum, pageSize) {
			var tempPageSize = $("option:selected", $("#pageSize")).val();
			if (null != tempPageSize) 
			  {pageSize = tempPageSize;}
			var urlStr = "${ctx}/roleListRe";
			listMgr.getListPage(pageNum, pageSize, urlStr);
			},
	    getListPage : function(pageNum, pageSize, urlStr) {
			$.ajax({
			  type : 'post',
			  url : urlStr,
			  dataType : 'json',
			  data : {"pageNum" : pageNum,"pageSize" : pageSize},
			  success : function(data) {
				console.log(data.pageStr);
				console.log(data.resList);
				var pageNum = data.resList.length;
	            $('select').select();
	            var oper;
				var tbody=[]; 
				var head = [ {
					label : 'ID',
					width : 100,
					sortable : 'default',
					name : 'ID'
				}, {
					label : '角色名',
					width : 200,
					sortable : 'default',
					name : '角色名'
				}, 
				{
					label : '更新人',
					width : 50,
					sortable : 'default',
					name : '更新人'
				}, 
				{
					label : '更新日期',
					width : 200,
					sortable : 'default',
					name : '更新日期'
				},
				{
					label : 'del_flag',
					width : 200,
					sortable : 'default',
					name : 'del_flag'
				},
				{
					label : '状态',
					width : 50,
					sortable : 'default',
					name : '状态'
				}
				
				];
	            $('.grid').Grid({
					thead : head,
					tbody : null,
					height : 37 * pageNum + 5,
					checkbox : {single : true},
					operator : {type : "normal",width : 100},
					sortCallBack : function(name, index, type) {alert(name + "," + index + ',' + type);}
						});
	            $('.grid').Grid('addLoading');
	     		$('.search-box input[type=radio]').click(function(e) {
					if ($(this).prop('checked')) {
					  if ($(this).attr('data-define') === 'define') {$('.define-input').show();
						} else {$('.define-input').hide();
									}
					  }
					});
	            $('#paging').html(data.pageStr);
	              // 模拟异步
				  setTimeout(function() {$('.grid').Grid('setData', tbody, head);}, 100)
				  $.each(data.resList,function(i, n) {
					oper = [
							{label : "删除",
							onclick : function() {
								roleMgr.deleteRole(n.roleId); 
								/* alert("删除"); */
							  }
							} ,
							{label : "<a href='${ctx}/editRole?editFlag=2&roleId="+ n.roleId+ "'>修改</a>",
								 onclick : function() {
									 alert("修改");
									}
								},
						  ];
					tbody[i]=[n.roleId,n.roleName,n.updateBy,n.updateDate,n.delFlag,"empty",oper];
					});
				}
			});
		}
	}
	$(function() {
	  console.log("我执行了！");
	  listMgr.getList(1, 10);
	});

</script>